﻿@page "/menu-bar/hamburger-menu"

@using Syncfusion.Blazor.Navigations


@inherits SampleBaseComponent

<SampleDescription>
   <p>This sample demonstrates the hamburger mode in the Menu component. </p> 
</SampleDescription>
<ActionDescription>
   <p>Enabling the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfMenu-1.html#Syncfusion_Blazor_Navigations_SfMenu_1_HamburgerMode'> HamburgerMode </a> property makes the Menu component in adaptive view. By default, its shows header with hamburger icon in <b>Horizontal</b> orientation.</p>
   <p>The Menu shows on clicking hamburger icon. You can use the Open and Close methods to show / hide the Menu programmatically.</p>
   <p>More information about Blazor Menu component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/menu-bar/getting-started/"> documentation </a> section.</p>
</ActionDescription>

<div class="menu-control">
    <div id='layoutcontainer' class="deviceLayout">
        <div class="speaker">
            <div class="camera"></div>
        </div>
        <div class="layout">
            <div id="container">
                <SfMenu TValue="MenuItem" HamburgerMode="true" ShowItemOnClick="true">
                    <MenuItems>
                        <MenuItem Text="Accessories">
                            <MenuItems>
                                <MenuItem Text="Mobile">
                                    <MenuItems>
                                        <MenuItem Text="Headphones"></MenuItem>
                                        <MenuItem Text="Batteries"></MenuItem>
                                        <MenuItem Text="Memory Cards"></MenuItem>
                                    </MenuItems>
                                </MenuItem>
                                <MenuItem Text="Laptops"></MenuItem>
                                <MenuItem Text="Desktop PC">
                                    <MenuItems>
                                        <MenuItem Text="Pendrives"></MenuItem>
                                        <MenuItem Text="External Hard Disks"></MenuItem>
                                    </MenuItems>
                                </MenuItem>
                                <MenuItem Text="Camera">
                                    <MenuItems>
                                        <MenuItem Text="Lens"></MenuItem>
                                        <MenuItem Text="Tripods"></MenuItem>
                                    </MenuItems>
                                </MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Fashion">
                            <MenuItems>
                                <MenuItem Text="Men"></MenuItem>
                                <MenuItem Text="Women"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Home & Living">
                            <MenuItems>
                                <MenuItem Text="Furniture"></MenuItem>
                                <MenuItem Text="Decor"></MenuItem>
                                <MenuItem Text="Smart Home Automation"></MenuItem>
                                <MenuItem Text="Dining & Serving"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Entertainment">
                            <MenuItems>
                                <MenuItem Text="Televisions"></MenuItem>
                                <MenuItem Text="Home Theatres"></MenuItem>
                                <MenuItem Text="Gaming Laptops"></MenuItem>
                            </MenuItems>
                        </MenuItem>
                        <MenuItem Text="Contact Us"></MenuItem>
                        <MenuItem Text="Help"></MenuItem>
                    </MenuItems>
                </SfMenu>
            </div>
        </div>
        <div class="outerButton"> </div>
    </div>
</div>

<style>
    .deviceLayout #menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
        height: 363px;
    }

        .deviceLayout #menu::-webkit-scrollbar {
            width: 0;
        }

    .menu-control {
        text-align: center;
    }

    #layoutcontainer:not(.deviceLayout) {
        margin-top: 45px;
    }

    .deviceLayout {
        line-height: initial;
        border: 1px solid black;
        width: 285px;
        height: 505px;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 28px;
        position: relative;
        background-image: linear-gradient(to top, #ffffff, #f5f5f5);
    }

        .deviceLayout .speaker {
            border: 1px solid black;
            border-radius: 5px;
            width: 20%;
            height: 5px;
            margin: 15px auto 0px auto;
            position: relative;
        }

        .deviceLayout .outerButton {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            border-radius: 50%;
            position: absolute;
            bottom: calc(0% + 10px);
            left: calc(50% - 15px);
        }

        .deviceLayout .camera {
            position: absolute;
            left: calc(-15% - 10px);
            top: -100%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid black;
        }

        .deviceLayout .layout {
            border: 1px solid black;
            margin: 20px 13px 0px 13px;
        }

    .layout #container {
        height: 405px;
        background-color: white;
        overflow: hidden;
    }

    #header {
        width: 100%;
        background-color: #7b8cfb;
    }
</style>
